<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
      请选择楼栋&emsp;&emsp;<el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }"
        @change="handleQuery"></el-cascader>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="header">
      <div class="div1"><span>●</span>空置</div>
      <div class="div2"><span>●</span>已出租</div>
      <div class="div3"><span>●</span>已出售</div>
      <div class="div4"><span>●</span>即将到期</div>
      <div class="div5"><span>●</span>租约逾期</div>
    </div>
    <div v-for="item in shopsList" class="shops">
      <div class="floor">
        {{item.floor}}层
      </div>
      <div class="list">
        <div v-for="shop in item.list">
          <div class="shop">
            <div class="number">
              {{shop.blockId-10000000}}-{{shop.buildId-100000}}-{{item.floor}}-{{shop.roomNum}}{{"（"}}{{shop.allArea}}m²{{"）"}}
            </div>
            <div class="text">
              <div class="name">盒马程序</div>
              <div class="status">出租打折</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    listShops,
    getShops,
    delShops,
    addShops,
    updateShops
  } from "@/api/system/shops";
  import {
    listBlockAndBuild,
    listShopsByFloor
  } from "../../../api/system/shops";

  export default {
    name: "Shops",
    dicts: ['sys_shop_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 商铺管理表格数据
        shopsList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 9999,
          buildId: 100001,
        },
        value: [10000001, 100001],
        options: []
      };
    },
    created() {
      this.getBlock();
    },
    methods: {
      /** 查询商铺管理列表 */
      getList() {
        this.loading = true;
        listShopsByFloor(this.queryParams).then(response => {
          this.shopsList = response.data;
          console.log(this.shopsList);
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.buildId = this.value[1]
        this.getList();
      },
      getBlock() {
        listBlockAndBuild().then(resp => {
          this.options = resp.data;
        });
      }
    },
    mounted() {
      this.getList();
    }
  };
</script>
<style scoped>
  .header {
    display: flex;
    margin-left: 20px;
    margin-bottom: 20px;
    text-align: left;
  }

  .header>div {
    line-height: 20px;
    font-size: 16px;
    display: inline-block;
    margin-right: 15px
  }

  .div1>span {
    font-size: 20px;
    color: #909399;
  }

  .div2>span {
    font-size: 20px;
    color: #1890ff;
  }

  .div3>span {
    font-size: 20px;
    color: #20b2aa;
  }

  .div4>span {
    font-size: 20px;
    color: #e6a23c;
  }

  .div5>span {
    font-size: 20px;
    color: #f56c6c;
  }

  .el-cascader {
    height: 30px;
    margin-left: 20px;
  }

  .shops {
    display: flex;

  }
  .list{
    display: flex;
    flex-flow:row wrap;
    justify-content: flex-start;
    align-items: center;
    width: 1500px;
  }

  .floor {
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 68px;
    margin-right: 35px;
    margin-left: 20px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 2px #ccc;
  }

  .shop {
    height: 82px;
    width: 210px;
    margin: 0, 15px, 15px 0px;
    font-size: 12px;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .3);
    background-color: #fff;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .number {
    width: 164px;
    background-color: #1890ff;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 30px;
    width: 100%;
    height: 24px;
    line-height: 24px;
    color: #fff;
  }

  .text {
    padding: 12px;
    padding-right: 30px;
    box-sizing: border-box;
  }
</style>
